{# Base template for binary tasks where users click on items arranged in a grid #}

{% extends "mturk/base_responsive.html" %}
{% load humanize %}
{% load compress %}

{% block css %}{{ block.super }}
<style>
	#mt-top-padding { height: 40px; }
	#mt-top-flat { padding: 2px 10px 2px 10px; }
	#mt-extra-inst { margin-top: 20px; }
	#mt-objects { margin-top: 10px; }
	#mt-bottom { text-align: center; }
	#hdr-type { display:inline; margin-right: 50px; }
	#hdr-color { margin-bottom: 0px; }
	body { padding: 0px; }
</style>
{% endblock %}

{% block content %}
<div id="mt-top">
	<div id="mt-instructions">
		<span>Instructions: {% block instructions_summary %}{% endblock %}</span>
		<span class="pull-right">
			<a href="#modal-instructions" role="button" class="btn" data-toggle="modal">Examples</a>&nbsp;
		</span>
	</div>
</div>
<div id="mt-top-padding"></div>

<div id="mt-container">
	<div class="container">
		<div class="row" id="mt-extra-inst">
			<div class="span12">
				{% block instructions_extra %}{% endblock %}
				<p>Please click the &quot;Examples&quot; button for help and examples (top right).</p>
			</div>
		</div>

		<div class="row" id="mt-objects">
			<div class="span12">
				<ul class="thumbnails">
				{% for c in contents %}
					<div class="span6">
						<div class="thumbnail entry">
							<div class="overlay-wrapper" style="min-width:210px; min-height:210px">
								<div class="entry" id="entry-{{ c.id }}" {{ c.get_entry_attr|safe }}>
									{% include content_thumb_template with entry=c %}
								</div>
								<div style="min-height:32px; margin-top:4px">
									<button class="btn canttell" id="canttell-{{ c.id }}" type="button" style="display:none">I can't tell</button>
								</div>
								<div class="overlay-container">
									<p class="overlay-content">
										<span id="no-{{ c.id }}">{{ html_no|safe }}</span>
										<span id="yes-{{ c.id }}" style="display:none">{{ html_yes|safe }}</span>
									</p>
								</div>
							</div>
						</div>
					</div>
					{% if forloop.counter|divisibleby:"2" %}
					</ul>
					<ul class="thumbnails">
					{% endif %}
				{% endfor %}
				</ul>
			</div>
		</div>

		<div class="row" style="margin-top: 20px">
			<div class="span12">
				{% block footer_reject %}
				{#<p>Many users perform each HIT; we will reject your HIT if too many answers are inconsistent.</p>#}
				{% endblock %}
				<p>This HIT is part of ongoing research at Cornell University.  Thanks for participating!</p>
			</div>
		</div>

		<div class="row" id="mt-bottom">
			<div class="span12">
				<div class="well">
					<span style="margin-right:20px"><code><span id="num-selected">0</span></code> {% block counter_name %}{% endblock %} </span>
					<button type="button" id='btn-submit' class="btn btn-primary" disabled="disabled">Submit</button>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock content %}

{% block modals %}{{ block.super }}
{% endblock modals %}

{% block scripts %}{{ block.super }}
{% include "mturk/content_id_script.html" %}

{% compress js %}
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/util.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/modals.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/common/active_timer.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/mturk/submit.coffee"></script>
<script type="text/coffeescript" src="{{ STATIC_URL }}js/mturk/experiments/filter_content.coffee"></script>
{% endcompress %}
{% endblock scripts %}
